<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
</head>
<body>

<div id="app">
        <router-view></router-view>
</div>

<script>
    /*热门*/
    const  hot = {
        template:`
            <div style="width: 200px; height: 200px;font-size: 30px;color: red; border: 1px solid pink;">
                    热门商品
            </div>
       `
    }
    /*电视影音*/
    const  tv = {
        template:`
            <div style="width: 200px; height: 200px;font-size: 30px;color: red; border: 1px solid blue;">
                   电视影音
            </div>
       `
    }
    /*空调*/
    const  airconditioner = {
        template:`
            <div style="width: 200px; height: 200px;font-size: 30px;color: red; border: 1px solid green;">
                   空调
            </div>
       `
    }
    /*家电*/
    const   homeappliances= {
        template:`
            <div style="width: 100%; height: 500px;border: 1px solid yellowgreen; font-size: 25px">
                家电
                <hr>
                <router-link to="/hot">热门</router-link>
                <router-link to="/tv">电视影音</router-link>
                <router-link to="/air">空调</router-link>
                <router-view></router-view>
            </div>

       `
    }

    //  1.定义路由列表
    const routes = [

        {
            path:'/home',       //   /home/hot
            component:homeappliances,
            children:[
                {
                    path:'/hot',
                    component:hot
                },
                {
                    path:'/tv',
                    component:tv
                },
                {
                    path:'/air',
                    component:airconditioner
                }
            ]
        }
    ]
    // 2.创建路由对象
    const  router =   new VueRouter({
            routes
        })

    const vm = new Vue({
        el:'#app',
        data:{},
        methods:{},
        components: {
            homeappliances
        },
        router     //    // 3.注册路由
    })
</script>

</body>
</html>
